<template>
  <div class="article">
    <mt-header title="视频充电站">
      <mt-button icon="back" slot="left" @click="goback">返回</mt-button>
    </mt-header>

    <swiper loop auto :list="slide_list" :index="slide_index" @on-index-change="slide_onIndexChange" dots-position="center"></swiper>
    <!-- mask -->
    <div class="video-mask" :style="{display:maskDisplay}" @click="cancelMask"></div>
    <!-- 年级，科目搜索 -->
    <div class="video-select">
      <div class="video-check">
        <div class="grade" @click="gradeClick">
          <button>
            {{gradesingle}}
            <img :class="{arrows:gDown}" src="../assets/down.png">
            <span v-show="gradeLine"></span>
          </button>
        </div>
        <div class="subject" @click="subjectClick">
          <button>
            {{subsingle}}
            <img :class="{arrows:sDown}" src="../assets/down.png">
            <span v-show="subjectLine"></span>
          </button>
        </div>

      </div>
      <div style="text-align:center">
        <div class="subject-popup" v-if="subjectShow">
          <x-button mini type="primary" v-model="subsingle" v-for="(item,subindex) in subjectList" :key="subindex" @click.native="subjectChange(item)">{{item}}</x-button>
        </div>
      </div>
      <div class="grade-popup" v-if="gradeShow">
        <x-button mini type="primary" v-model="gradesingle" v-for="(item,index) in gradeList" :key="index" @click.native="gradeChange(item)">{{item}}
        </x-button>
      </div>
    </div>
    <!-- 列表 -->
    <div class="page-loadmore">
      <div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
        <mt-spinner v-show="list<1 && InitialLoading" color="#26a2ff"></mt-spinner>
        <mt-loadmore :top-method="loadTop" @translate-change="translateChange" @top-status-change="handleTopChange" :bottom-method="loadBottom"
          @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
          <ul class="page-loadmore-list" v-if="list>0">
            <li v-for="(item,index) in videoList" :key="index" class="page-loadmore-listitem">
              <img class="article-list-img" :src="item.cover" alt="">
              <router-link class="router" :to="{path:'/Video/VideoDetail',query:{id:item.id}}">
                <div class="article-list-content">
                  <p class="list-content-tt">{{item.title}}</p>
                  <p class="list-content-intro">{{item.description}}</p>
                </div>
              </router-link>
            </li>
          </ul>
          <div slot="top" class="mint-loadmore-top" style="text-align:center">
            <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
            <mt-spinner v-show="topStatus == 'loading'" color="#26a2ff"></mt-spinner>
          </div>
          <load-more v-if="allLoaded" :show-loading="false" :tip="$t('无更多内容了')" background-color="#fbf9fe"></load-more>
          <div slot="bottom" class="mint-loadmore-bottom">
            <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
            <span v-show="bottomStatus === 'loading'">
              <mt-spinner v-show="bottomStatus == 'loading'" color="#26a2ff"></mt-spinner>
            </span>
          </div>
        </mt-loadmore>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    Swiper,
    GroupTitle,
    SwiperItem,
    XButton,
    Divider,
    LoadMore
  } from "vux";
  import {
    getVideoList_Axios,
    getVideoBanner_Axios,
    getSubject_Axios,
  } from './axios/api';

  export default {
    components: {
      Swiper,
      SwiperItem,
      GroupTitle,
      XButton,
      Divider,
      LoadMore
    },
    data() {
      return {
        //轮播图
        slide_list: [],
        slide_index: 0,
        //上拉加载
        pageNum: 0, //页码
        InitialLoading: true, //初始加载
        list: 10, //数据
        allLoaded: false, //数据是否加载完毕
        bottomStatus: "", //底部上拉加载状态
        wrapperHeight: 0, //容器高度
        topStatus: "", //顶部下拉加载状态
        translate: 0, //
        moveTranslate: 0,
        subjectShow: false,
        gradeShow: false,
        maskDisplay: "none",
        subjectLine: false,
        gradeLine: false,
        sDown: false,
        gDown: false,
        gradeList: ["初一", "初二", "初三", "高一", "高二", "高三"],
        subjectList: [],
        gradesingle: "年级",
        subsingle: "科目",
        gradeNum: "",
        getSubject: "",
        totalPage: 0,
        videoList: [],
      };
    },
    ready() {},
    methods: {
      //轮播图
      slide_onIndexChange(index) {
        this.slide_index = index; //显示序号
      },
      //上拉加载
      handleBottomChange(status) {
        this.moveTranslate = 1;
        this.bottomStatus = status;
      },

      hideSubject() {
        this.subjectShow = false; //隐藏科目选择
        this.maskDisplay = "none"; //隐藏遮罩层
        this.subjectLine = false; //隐藏下划线
        this.sDown = false; //箭头收回
      },
      subjectClick: function () {
        //点击科目选择
        if (this.subjectShow == true) {
          //如果已选取
          this.subjectShow = false; //隐藏科目选择
          this.maskDisplay = "none"; //隐藏遮罩层
          this.subjectLine = false; //隐藏下划线
          this.sDown = false; //箭头收回
        } else {
          this.subjectShow = true; //显示科目选择
          this.gradeShow = false; //隐藏年级选择
          this.maskDisplay = "block"; //显示遮罩层
          this.subjectLine = true; //显示科目下划线
          this.gradeLine = false; //隐藏年级下划线
          this.sDown = true; //科目点击箭头展开
          this.gDown = false; //年级选择箭头收回
        }
      },
      gradeClick: function () {
        //点击年级选择
        if (this.gradeShow == true) {
          this.gradeShow = false;
          this.maskDisplay = "none";
          this.gradeLine = false;
          this.gDown = false;
        } else {
          this.subjectShow = false;
          this.gradeShow = true;
          this.maskDisplay = "block";
          this.subjectLine = false;
          this.gradeLine = true;
          this.sDown = false;
          this.gDown = true;
        }
      },
      cancelMask: function () {
        this.maskDisplay = "none";
        this.gradeShow = false;
        this.subjectShow = false;
      },
      loadBottom() {
        this.handleBottomChange("loading"); //上拉时 改变状态码
        this.pageNum += 1;
        setTimeout(() => {
          //上拉加载更多 模拟数据请求这里为了方便使用一次性定时器
          if (this.pageNum <= this.totalPage) {
            //最多下拉三次
            this.list += 10; //上拉加载 每次数值加10
          } else {
            this.allLoaded = true; //模拟数据加载完毕 禁用上拉加载
          }
          this.getVideoListLoad(this.list);
          this.handleBottomChange("loadingEnd"); //数据加载完毕 修改状态码
          this.$refs.loadmore.onBottomLoaded();
        }, 500);
      },
      //加载更多列表
      getVideoListLoad(size) {
        this.gradeList.forEach((element, index) => {
          if (this.gradesingle == element) {
            this.gradeNum = index + 7;
          }
        });
        if (this.subsingle == '科目') {
          this.getSubject = '';
        } else {
          this.getSubject = this.subsingle;
        }
        getVideoList_Axios(size, this.getSubject, this.gradeNum).then(response => {
          if (response.status == 200) {
            console.log("获取列表成功", response);
            this.videoList = response.data.data.content;

            this.gradeShow = false;
            this.maskDisplay = "none";
            this.gradeLine = false;
            this.gDown = false;

            this.subjectShow = false; //隐藏科目选择
            this.maskDisplay = "none"; //隐藏遮罩层
            this.subjectLine = false; //隐藏下划线
            this.sDown = false; //箭头收回

            //采用下拉刷新机制更新列表
            this.handleTopChange("loading");
            this.handleTopChange("loadingEnd");
            this.$refs.loadmore.onTopLoaded();
          }
        });

      },
      handleTopChange(status) {
        this.moveTranslate = 1;
        this.topStatus = status;
      },
      translateChange(translate) {
        const translateNum = +translate;
        this.translate = translateNum.toFixed(2);
        this.moveTranslate = (1 + translateNum / 70).toFixed(2);
      },
      loadTop() {
        //下拉刷新 模拟数据请求这里为了方便使用一次性定时器
        this.handleTopChange("loading"); //下拉时 改变状态码

        this.allLoaded = false; //下拉刷新时解除上拉加载的禁用
        setTimeout(() => {

          this.getVideoListLoad(this.list);
          this.handleTopChange("loadingEnd"); //数据加载完毕 修改状态码
          this.$refs.loadmore.onTopLoaded();
        }, 500);
      },
      //搜索获取科目
      getVideoList(item) {
        if (this.gradeList.indexOf(item) < 0) {
          //获取年级
          console.log("执行科目搜索");
          this.gradeList.forEach((element, index) => {
            if (this.gradesingle == element) {
              this.gradeNum = index + 7;
            }
          });
          this.subject = null;
          let size = this.list;
          getVideoList_Axios(size, item, this.gradeNum).then(response => {
            if (response.status == 200) {
              this.videoList = response.data.data.content;
              //固定10个的总页数
              if (this.totalPage == 0) {
                this.totalPage = response.data.data.totalPages;
              }
              this.gradeShow = false;
              this.maskDisplay = "none";
              this.gradeLine = false;
              this.gDown = false;

              this.subjectShow = false; //隐藏科目选择
              this.maskDisplay = "none"; //隐藏遮罩层
              this.subjectLine = false; //隐藏下划线
              this.sDown = false; //箭头收回

              //采用下拉刷新机制更新列表
              this.handleTopChange("loading"); //下拉时 改变状态码
              this.pageNum = 1;
              this.handleTopChange("loadingEnd"); //数据加载完毕 修改状态码
              this.$refs.loadmore.onTopLoaded();
            }
          }).catch(err => {
            console.log('请求失败', err)
          })
        }
        if (this.subjectList.indexOf(item) < 0) {
          console.log("执行年级搜索");
          this.gradeList.forEach((element, index) => {
            if (item == element) {
              this.gradeNum = index + 7;
            }
          });
          if (this.subsingle == '科目') {
            this.getSubject = '';
          } else {
            this.getSubject = this.subsingle;
          };
          let size = this.list;
          getVideoList_Axios(size, this.getSubject, this.gradeNum).then(response => {
            if (response.status == 200) {
              this.videoList = response.data.data.content;
              if (this.totalPage == 0) {
                this.totalPage = response.data.data.totalPages;
              }
              this.gradeShow = false;
              this.maskDisplay = "none";
              this.gradeLine = false;
              this.gDown = false;

              this.subjectShow = false; //隐藏科目选择
              this.maskDisplay = "none"; //隐藏遮罩层
              this.subjectLine = false; //隐藏下划线
              this.sDown = false; //箭头收回
              //采用下拉刷新机制更新列表
              this.handleTopChange("loading");
              this.pageNum = 1;

              this.handleTopChange("loadingEnd");
              this.$refs.loadmore.onTopLoaded();
            }
          }).catch(err => {
            console.log('请求失败', err)
          })
        }
      },

      //获取banner图
      getBanner: function () {
        getVideoBanner_Axios().then(response => {
          if (response.data.status == 0) {
            console.log('responseVideo', response);
            let bannerList = response.data.data;
            this.slide_list = bannerList.map((item, index) => ({
              url: item.forward, //点击图片跳转链接
              img: item.url
            }))
          }
        }).catch(err => {
          console.log('请求失败', err)
        })
      },
      //获取科目列表
      getSubjectList: function () {
        getSubject_Axios().then(response => {
          if (response.data.status == 0) {
            this.subjectList = response.data.data;
          }
        }).catch(err => {
          console.log('请求失败', err)
        })
      },
      gradeChange: function (item) {
        this.gradesingle = item;
        this.getVideoList(item);
      },
      subjectChange: function (item) {
        this.subsingle = item;
        this.getVideoList(item);
      }
    },

    mounted() {
      let windowWidth = document.documentElement.clientWidth; //获取屏幕高度
      if (windowWidth > 768) {
        //这里根据自己的实际情况设置容器的高度
        this.wrapperHeight = document.documentElement.clientHeight - 130;
      } else {
        this.wrapperHeight = document.documentElement.clientHeight - 90;
      }

      this.getBanner();
      this.getVideoList();
      this.getSubjectList();
    },
    filters: {
      grades: function (item) {
        switch (item) {
          case "初一":
            return (a = 7);
          case "初二":
            return 8;
          case "初三":
            return 9;
          case "高一":
            return 10;
          case "高二":
            return 11;
          case "高三":
            return 12;
        }
      }
    }
  };

</script>

<style lang="scss" scoped>
  .background {
    background-color: #ffe57e;
  } //下拉选择按钮
  .video-check {
    display: flex;
    background-color: #ffe57e;
    div {
      flex: 1;
      height: 2rem;
      padding: 0 3.5rem;
      margin: 1rem 0;
      background-color: #ffe57e;
    }
    .subject {
      position: relative;

      border-left: 1px solid #5f2500;
      button {
        position: relative;
        width: 100%;
        height: 2rem;
        line-height: 2rem;
        font-size: 1.4rem;
        font-weight: 600;
        color: #5f2500;
        background-color: #ffe57e;
      }
      img {
        position: absolute;
        width: 2rem;
        height: 2rem;
      }
      span {
        position: absolute;
        top: 1.5rem;
        left: 0;
        width: 100%;
        height: 1rem;
        border-bottom: 2px solid #e3a51c;
      }
    }
    .grade {
      @extend .subject;
      border-left: none;
      border-right: 1px solid #5f2500;
    }
  } //下拉科目
  .subject-popup {
    margin: .5% 2.2% 2.5%;
    border-top: 2px solid #fcc120;
    background-color: #fcd32d;
    text-align: left;

    button {
      margin: 4% 2.9%;
      width: 27.5%;
      height: 2.75rem;
      line-height: 2.75rem;
      font-weight: bold;
      font-size: 1.4rem;
      color: #5f2500;
      background-color: #ffe57e;
    }
    button:active,
    button:focus {
      color: #fff;
      background-color: #dd9f1a;
    }
  }

  .video-select {
    position: absolute;
    width: 100%;
    z-index: 5000;
    background-color: #ffe57e;
  }

  .page-loadmore {
    margin-top: 4rem;
  }

  .grade-popup {
    @extend .subject-popup;
  }

  .arrows {
    transform: rotate(180deg);
  } //遮罩mask
  .video-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.6);
  }

  @keyframes fadeInSub {
    //定义动画
    from {
      opacity: 0;
      transform: translate3d(-100%, 0, 0); //从左侧插入
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes fadeInGra {
    from {
      opacity: 0;
      transform: translate3d(-100%, 0, 0); //从左侧插入
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .subject-popup {
    animation-duration: 0.5s; //动画事件
    animation-fill-mode: both; //动画作用
    animation-name: fadeInSub; //动画名称
  }

  .grade-popup {
    animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-name: fadeInGra;
  }

  .page-title,
  .page-footer {
    text-align: center;
    position: absolute;
  }

  .page-title {
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
  }

  .page-footer {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
  }

  .page-title+* {
    margin-top: 50px;
  }

  @media (min-width: 768px) {
    .page-title {
      height: 90px;
      line-height: 90px;
    }
    .page-title+* {
      margin-top: 90px;
    }
  }

  .page-loadmore-listitem {
    display: flex;
    height: 10rem;
    line-height: 10rem;
    align-items: center;
  }

  .page-loadmore-listitem {
    border-bottom: 8px solid #fbf3d0;
  }

  .page-loadmore-wrapper {
    overflow: scroll;
    text-align: center;
  }

  .page-loadmore-list {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
    position: relative;
  } //文章列表图片
  .article-list-img {
    width: 7rem;
    height: 7rem;
    margin: 1.5rem;
    flex: 1;
  }

  .router {
    flex: 3;
  }

  .article-list-content {
    display: flex;
    flex: 2;
    flex-direction: column;
    margin: 1.5rem 0.5rem 1.5rem 1rem;
    .list-content-tt {
      flex: 1;
      line-height: 2rem;
      text-align: left;
      font-size: 1.4rem;
      font-weight: 600;
      padding-bottom: 1rem;
    }
    .list-content-intro {
      flex: 1;
      line-height: 2rem;
      text-align: left;
      font-size: 1.2rem;
      color: #bababa;
    }
    .list-content-time {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex: 1;
      line-height: 2rem;
      text-align: right;
      font-size: 1.2rem;
      color: #bababa;
      img {
        width: 2rem;
        height: 2rem;
        margin-left: 0.5rem;
      }
    }
  }

</style>
